<template>
    <div class="info-tree">
        <div class="info">
            <div class="info-content">
                <img :src="proxy.globalInfo.imageUrl + blogCategory.cover" alt="">
                <div>
                    <div class="name">{{ blogCategory.categoryName }}</div>
                    <div class="count">文章&nbsp;:&nbsp;&nbsp;{{ blogCategory.blogCount }}篇</div>
                </div>
            </div>
            <div class="info-desc">
                <span>简介&nbsp;:</span>
                <div class="desc ">{{ blogCategory.categoryDesc }}</div>
            </div>
        </div>
        <div class="ltree">
            <a-tree blockNode :replaceFields="treeProps" :tree-data="blogTreeData" @select="treeSelect">
            </a-tree>
        </div>
    </div>
</template>

<script setup>
import { ref, getCurrentInstance } from 'vue';
import { useRoute } from 'vue-router';
const { proxy } = getCurrentInstance();
const route = useRoute()
const api = {
    getSpecialDetail: "/view/getSpecialDetail"
};
//属性展示专题
const treeProps = {
    children: "children",
    label: "title",
    value: "blogId",
};
const paramsId = ref(route.params.blogId)
//获取博客专辑
const blogTreeData = ref([]);
const blogCategory = ref({});
const emits = defineEmits(['getTreeBlogId'])
const loadBlogTreeData = async () => {
    let result = await proxy._request({
        url: api.getSpecialDetail,
        params: {
            categoryId: paramsId.value
        }
    })
    if (!result) {
        return;
    }
    blogTreeData.value = result.data.blogList;
    blogCategory.value = result.data.blogCategory;
    if (blogTreeData.value) {
        let id = blogTreeData.value[0].blogId
        emits('getTreeBlogId', id)
    }
}
loadBlogTreeData()

// 点击节点
const treeSelect = (key, node) => {
    const { node: { blogId } } = node
    emits('getTreeBlogId', blogId)
}
</script>

<style lang="scss" scoped>
.info-tree {
    width: 300px;
    box-sizing: border-box;
    margin-right: 20px;

    .info {
        width: 100%;
        height: 86px;
        background-color: #fff;
        box-sizing: border-box;
        border-radius: 4px;
        display: flex;
        flex-direction: column;
        padding: 10px;

        .info-content {
            display: flex;

            img {
                width: 40px;
                height: 40px;
                border-radius: 4px;
                margin-right: 10px;
            }

            div {
                flex: 1;

                .name {
                    width: 100%;
                    @include multi-ellipsis(1)
                }

                .count {
                    font-size: 12px;
                    color: #919da9;
                }
            }

        }

        .info-desc {
            display: flex;
            margin-top: 4px;

            span {
                display: inline-block;
                width: 40px;
            }

            .desc {
                flex: 1;
                @include multi-ellipsis(1)
            }
        }
    }

    .ltree {
        width: 100%;
        background-color: #fff;
        border-radius: 4px;
        margin-top: 20px;
        padding: 20px 20px 20px 0;
        box-sizing: border-box;
        
    }
}
</style>